////////////////////
// Header menu sm / xs
////////////////////

@media (max-width: 991.98px) {
  body {
    height: 100vh;
    background-image: linear-gradient(to bottom, $is-bg-color, $is-bg-color-alt);

    .view.flex > .content .card-view {
      border-top: none;
    }

    &.simple-without-ng-layout {
      height: 100%;
    }
  }
  nav.navbar.navbar-expand-lg {
    padding: 0;

    > .navbar-right, > .nav-item {
      height: 3.9375rem;
      background-color: $is-bg-color;
    }

    #menu-loader {
      margin: 1rem;
    }

    .navbar-right {
      padding: 0.8125rem 0;
    }

    .navbar-collapse.show {
      height: calc(100vh - 4rem);
    }

    .navbar-collapse .workspace-menu {
      padding-left: 0;

      > .nav-link.dropdown-toggle {
        height: 6.18rem;
        background: $is-bg-color;
        border-bottom: 1px solid $is-border-color;

        &:not(.no-caret)::after {
          height: 10px;
          width: 10px;
          border-right: 3px solid;
          border-bottom: 3px solid;
          margin-left: 0.8em;
        }
      }

      &.open {
        > .nav-link.dropdown-toggle {
          background: none;

          &:not(.no-caret)::after {
            transform: rotate(225deg);
            margin-top: 0.825rem;
          }
        }
      }

      .dropdown-menu {
        box-shadow: none;

        .dropdown-header, .dropdown-item {
          font-size: 1rem;
          line-height: 1.8rem;
          padding: 0.5rem 1.5rem;

          .shortcut {
            display: none;
          }
        }

        .dropdown-divider {
          margin: 1em 0;
        }
      }

      .workspace-icon {
        @include square-background(1.25rem);
      }

      .workspace-title {
        font-size: 1.5625rem;
      }
    }
  }

  nav.navbar .nav-item .nav-link:not(.dropdown-toggle) {
    font-size: 1.063rem;
    height: auto;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 1rem !important;
    margin: 1rem 0;
    border-image: $is-bg-color;
  }

  nav.navbar .nav-item.active .nav-link:not(.dropdown-toggle) {
    border-style: solid;
    border-width: 0 0 0 4px;
    border-image: linear-gradient(to bottom, #2611e7, #6db4d7);
    border-image-slice: 1;
  }

  #primary-menu .icon-main-menu {
    margin-right: 4px;
    @include rectangle-background(30px, 30px);
  }

  .navbar-toggler:not(.collapsed) {
    .navbar-toggler-icon {
      width: 1rem;
      background-image: url('close-menu-#{$theme}.svg');
    }
  }
  .navbar-toggler.collapsed {
    .navbar-toggler-icon {
      background-image: url('open-menu-#{$theme}.svg');
    }
  }
  .navbar-toggler {
    padding-top: 0;

    .navbar-toggler-icon {
      width: 1.25rem;
      height: 1.25rem;
    }
  }
  .view.flex.with-details {
    > .content {
      width: 100%;
    }

    [ui-view='details'] {
      position: absolute;
      bottom: 0;
      top: calc(4rem - 1px);
      left: 40px;
      right: 0;
      width: auto !important;
    }
  }
}